﻿var model = new Vue({
    el: '#app',
    data: {
        peopleCount: 1,
        showCommon: true,
        showTable: false,
        level: '1',
        place: '1',
        workDate: 0,
        beginTime: 0,
        endTime: 0,
        beginTimeTxt: '',
        endTimeTxt: '',

        minHour: 9,
        minMin: 0,
        timeSlot: 0,
        tableCount: 1,
        openid: $('#hiddOpenId').val(),
        levels: $('#hiddLevels').val(),
        tables: [],
    },
    computed: {
        tableCountNeeded: function () {
            return parseInt(this.peopleCount / 6) + (this.peopleCount % 6 == 0 ? 0 : 1);
        },

        enableCommontNext: function () {
            return this.workDate > 0 && this.beginTime > 0 && this.endTime > 0 && this.timeSlot > 1;
        },
        enableTableNext: function () {
            return this.tableCountNeeded - this.tableCount == this.tableCountNeeded;
        },
        startTime: function () {
            var self = this;

            if (self.beginTime > 0 && self.endTime > 0) {
                return self.beginTimeTxt + '~' + self.endTimeTxt;
            }
        },
        data: function () {
            return JSON.stringify(this._data);
        }
    },
    methods: {
        changeDate: function () {
            console.log("onchange")
        },
        showLoading: function () {
            $('#tip-loading').addClass('show');
        },
        hideLoading: function () {
            $('#tip-loading').removeClass('show');
        },
        showError: function (errmsg) {
            swal({
                title: "操作失败",
                text: errmsg,
                type: "error",
                showConfirmButton: false,
                showCancelButton: false,
                timer: 2000,
            });
        },
        showSuccess: function () {
            swal({
                title: "操作成功",
                text: "正在跳转页面...",
                type: "success",
                showConfirmButton: false,
                showCancelButton: false,
            });
        },
        addPeopleCount: function () {
            this.peopleCount += 1;

            this.tableCount = parseInt(this.peopleCount / 6) + (this.peopleCount % 6 == 0 ? 0 : 1);
        },
        subPeopleCount: function () {
            if (this.peopleCount <= 1)
                return;
            this.peopleCount -= 1;

            this.tableCount = parseInt(this.peopleCount / 6) + (this.peopleCount % 6 == 0 ? 0 : 1);
        },
        commonNext: function () {
            if (!this.enableCommontNext)
                return;

            this.showLoading();
            var self = this;

            $.ajax({
                type: "GET",
                url: "../../api/subscribe/matched/table/?levelstr="+self.levels,
                contentType: "application/json",
                success: function (data) {
                    if (data.Success) {
                        self.hideLoading();
                        self.tables = data.Results;
                        self.showCommon = false;
                        self.showTable = true;
                    }
                    else {
                        self.hideLoading();
                        self.showError(data.ErrMsg);
                    }
                }
            });
        },
        addTableCount: function (idx) {
            var item = this.tables[idx];

            console.log(item.LevelQuantity);

            if (this.tableCount <= 0)
                return;

            this.tableCount -= 1;
            console.log(this.tableCount);
            item.LevelQuantity += 1;
            console.log(item.Count);

        },
        subTableCount: function (idx) {
            var item = this.tables[idx];
            if (item.LevelQuantity <= 0)
                return;

            this.tableCount += 1;
            item.LevelQuantity -= 1;
        },
        tableNext: function () {
            if (!this.enableTableNext)
                return;
            this.showLoading();
            $('#form').submit();

        },
        tableBack: function () {
            this.showTable = false;
            this.showCommon = true;
            this.tableCount = this.tableCountNeeded;
        },
        changeLevel: function (val) {
            this.level = val;
        },
        changePlace: function (val) {
            this.place = val;
        },
        selectTime: function () {
            $('#txtBeginTime').click();
        },
        setTime: function(min)
        {
            var self = this;

            $('#txtBeginTime').mobiscroll().time({
                theme: 'mobiscroll',     // Specify theme like: theme: 'ios' or omit setting to use default
                mode: 'mixed',       // Specify scroller mode like: mode: 'mixed' or omit setting to use default
                display: 'bottom', // Specify display mode like: display: 'bottom' or omit setting to use default
                lang: 'zh',       // Specify language like: lang: 'pl' or omit setting to use default
                minDate: new Date(new Date().setHours(min, 0, 0, 0)),
                maxDate: new Date(new Date().setHours(22, 0, 0, 0)),
                headerText: '开始时间',
                steps: {
                    minute: 30
                },
                onSelect: function (val, ins) {

                    self.minMin = ins.getDate().getMinutes();
                    self.minHour = ins.getDate().getHours();

                    self.beginTime = parseInt(ins.getDate().getHours() * 60 + ins.getDate().getMinutes());
                    self.beginTimeTxt = new moment(ins.getDate()).format('HH:mm');


                    if (self.minMin > 0) {
                        self.minHour += 1
                    }

                    $('#txtEndTime').mobiscroll().time({
                        theme: 'mobiscroll',     // Specify theme like: theme: 'ios' or omit setting to use default
                        mode: 'mixed',       // Specify scroller mode like: mode: 'mixed' or omit setting to use default
                        display: 'bottom', // Specify display mode like: display: 'bottom' or omit setting to use default
                        lang: 'zh',       // Specify language like: lang: 'pl' or omit setting to use default
                        headerText: '结束时间',
                        minDate: new Date(new Date().setHours(self.minHour, self.minMin > 0 ? 0 : 30, 0, 0)),
                        maxDate: new Date(new Date().setHours(22, 0, 0, 0)),
                        steps: {
                            minute: 30
                        },
                        onSelect: function (val, ins) {
                            self.endTimeTxt = new moment(ins.getDate()).format('HH:mm');

                            self.endTime = parseInt(ins.getDate().getHours() * 60 + ins.getDate().getMinutes());
                            self.timeSlot = (self.endTime - self.beginTime) / 30;
                            console.log(self.workDate);
                            console.log(self.beginTime);
                            console.log(self.endTime);
                            console.log(self.timeSlot);
                        }
                    });
                    $('#txtEndTime').click();
                }
            });
        },
        init: function () {
            var self = this;

            $('#ddlLevel').mobiscroll().select({
                theme: 'mobiscroll',     // Specify theme like: theme: 'ios' or omit setting to use default
                mode: 'mixed',       // Specify scroller mode like: mode: 'mixed' or omit setting to use default
                display: 'bottom', // Specify display mode like: display: 'bottom' or omit setting to use default
                lang: 'zh',        // Specify language like: lang: 'pl' or omit setting to use default
                onSelect: function (val, ins) {
                    self.level = ins.getVal();
                }
            });

            $('#ddlPlace').mobiscroll().select({
                theme: 'mobiscroll',     // Specify theme like: theme: 'ios' or omit setting to use default
                mode: 'mixed',       // Specify scroller mode like: mode: 'mixed' or omit setting to use default
                display: 'bottom', // Specify display mode like: display: 'bottom' or omit setting to use default
                lang: 'zh',        // Specify language like: lang: 'pl' or omit setting to use default
                onSelect: function (val, ins) {
                    self.place = ins.getVal();
                }
            });


            $('#txtDate').mobiscroll().date({
                theme: 'mobiscroll',     // Specify theme like: theme: 'ios' or omit setting to use default
                mode: 'mixed',       // Specify scroller mode like: mode: 'mixed' or omit setting to use default
                display: 'bottom', // Specify display mode like: display: 'bottom' or omit setting to use default
                lang: 'zh',       // Specify language like: lang: 'pl' or omit setting to use default
                dateFormat: "yyyy年MMdd日",
                minDate: new Date(),
                maxDate: moment().add(14 - moment().day(), 'days').toDate(),
                onSelect: function (val, ins) {
                    var selectedDate = ins.getDate()
                    self.workDate = parseInt(new moment(selectedDate).format('YYYYMMDD'));
                    console.log(self.workDate);
                    console.log(self.beginTime);
                    console.log(self.endTime);
                    console.log(self.timeSlot);

                    if (self.workDate == moment().format('YYYYMMDD')) {
                        self.minHour = (new Date()).getHours() + 2;
                    }
                    else {
                        self.minHour = 9;
                    }

                    self.setTime(self.minHour);

                    self.beginTime = 0,
                    self.endTime = 0,
                    self.beginTimeTxt = '',
                    self.endTimeTxt = '',
                    self.selectTime();
                }
            });

            self.setTime(self.minHour);
        }
    }
});

model.init();